<template>
     <view class="clone">
	   <image :src="imageUrl + '/gongyijiaoyu/Frame-1355.png'" class="header-shadow"></image>
       <image :src="imageUrl + '/gongyijiaoyu/gongyijiaoyuRectangle-34625192.png'" class="tbyy"></image>
       <view class="navigation-wrapper">
         <view class="navigation-bar" style="display: flex;">
           <view :class="{'active-option': true, 'green': image1Selected, 'gray':!image1Selected}" @click="selectImage(1)">服务</view>
                   <view :class="{'active-option': true, 'green': image2Selected, 'gray':!image2Selected}" @click="selectImage(2)">竞赛</view>
                   <view :class="{'active-option': true, 'green': image3Selected, 'gray':!image3Selected}" @click="selectImage(3)">成果</view>
                   <view :class="{'active-option': true, 'green': image4Selected, 'gray':!image4Selected}" @click="selectImage(4)">论坛</view>
         </view>
       </view>
       <image :src="imageUrl + '/yunzhanguan/yunzhanguanGroup-638.png'" class="fahui" @click="shangyiye"></image>
       <z-swiper v-model="currentList" :custom-style="{height:'100vh'}" :options="options">
         <z-swiper-item v-for="(item, index) in currentList" :key="index">
            <image class="image" :src="item" mode="aspectFill" @click="goToPage"></image>
         </z-swiper-item>
       </z-swiper>
     </view>
   </template>

<script>
	export default {
	  data() {
	    return {
		  page4PreviousParam: '',
		  imageUrl: this.$imageUrl,
	      image1Selected: true,
	      image2Selected: false,
	      image3Selected: false,
	      image4Selected: false,
		  startIndex: '',
		  currentList:[],
		  options: {
			slidesPerView: 1.5,
			centeredSlides: true,
			loop:true,
		  	direction: 'vertical',
			panorama: {
					depth: 150,
					rotate: 45,
				},
		  	},
		    image1List: [
		        // 服务对应的轮播图数据
				'https://xnlv.lizxx.com/image/xnlv/static/gyjy.png',
				'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
				'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
				'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',
				'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg',
		        ],
		    image2List: [
		        // 竞赛对应的轮播图数据
		  		'https://xnlv.lizxx.com/image/xnlv/static/gyjy.png',
		  		'https://q5.itc.cn/q_70/images03/20240427/e1e85565b37e42878b539cee1954d2f3.jpeg',
		  		'https://img2.baidu.com/it/u=3660685086,4132725927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1428',
		  		'https://q9.itc.cn/q_70/images03/20240427/e8a16140beff4828b41c7b8e41cac693.jpeg',
		  		'https://img1.baidu.com/it/u=1594426019,2396900062&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1455',
		        ],
			image3List: [
			    // 成果对应的轮播图数据
				'https://xnlv.lizxx.com/image/xnlv/static/gyjy.png',
				'https://q4.itc.cn/q_70/images03/20240427/ab26c73f34814dc0a0d33bf84a4c6df8.jpeg',
				'https://q7.itc.cn/q_70/images03/20240413/cd96dfc3dc9547aca12e136957c94888.jpeg',
				'https://q9.itc.cn/q_70/images03/20240409/bae00ff4aab64ecfaf91970650da7215.jpeg',
				'https://q4.itc.cn/q_70/images03/20240427/9f68685dd0974930905f2ccc1ad45d32.jpeg',
			      ],
			image4List: [
			     // 论坛对应的轮播图数据
				'https://xnlv.lizxx.com/image/xnlv/static/gyjy.png',
				'https://q5.itc.cn/q_70/images03/20240413/fe42b29d66ac42469eba71393c8e5b59.jpeg',
				'https://q4.itc.cn/q_70/images03/20240427/9f68685dd0974930905f2ccc1ad45d32.jpeg',
				'https://p5.itc.cn/q_70/images03/20230617/6940092b4cb543879b18013b92c39ca1.jpeg',
				'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0705%2Fe9fd1319j00sg5la2006fd200u001swg007w00h2.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
			      ],
	    };
	  },
	  onLoad(options) {
		this.page4PreviousParam = options.fromPage;
		console.log('上一个页面传递的参数：', this.page4PreviousParam);
	    const imageId = options.imageId;
	    this.currentImageId = imageId;
		 // 默认情况下设置为第一个导航栏选项被选中
		    this.image1Selected = true;
		    this.image2Selected = false;
		    this.image3Selected = false;
		    this.image4Selected = false;
		    // 将当前轮播图列表设置为第一个导航栏对应的列表
		    this.currentList = this.image1List;
	    // 根据 imageId 设置不同的导航栏选项状态
	    if (imageId === 'image1') {
	      this.image1Selected = true;
	      this.image2Selected = false;
	      this.image3Selected = false;
	      this.image4Selected = false;
		  this.currentList = this.image1List;
	    } else if (imageId === 'image2') {
	      this.image1Selected = false;
	      this.image2Selected = true;
	      this.image3Selected = false;
	      this.image4Selected = false;
		  this.currentList = this.image2List;
	    } else if (imageId === 'image3') {
	      this.image1Selected = false;
	      this.image2Selected = false;
	      this.image3Selected = true;
	      this.image4Selected = false;
		  this.currentList = this.image3List;
	    } else if (imageId === 'image4') {
	      this.image1Selected = false;
	      this.image2Selected = false;
	      this.image3Selected = false;
	      this.image4Selected = true;
		  this.currentList = this.image4List;
	    }
	  },
	  methods: {
		selectImage(index) {
		    this.image1Selected = index === 1;
		    this.image2Selected = index === 2;
		    this.image3Selected = index === 3;
		    this.image4Selected = index === 4;
		    if (index === 1) {
		    this.currentList = this.image1List;
			this.options.startIndex = 0;
		    } else if (index === 2) {
		    this.currentList = this.image2List;
			this.options.startIndex = 1;
		    } else if (index === 3) {
		    this.currentList = this.image3List;
			this.options.startIndex = 1;
		    } else if (index === 4) {
		    this.currentList = this.image4List;
			this.options.startIndex = 1;
		    }
		    },
		shangyiye(){
			console.log('触发了')
			if (this.page4PreviousParam) {
				wx.redirectTo({
				 url: `/${this.page4PreviousParam}`
				});
		    } else {
			wx.redirectTo({
			  url: `/pagesNew/pages-public-welfare/public-welfare-education`
			});
		  }
		},
		goToPage(index) {
		    wx.redirectTo({
		    url: '/pagesNew/pages-special-local/pages-special-products/detail-page',
		    });
		}
	  },
	};
</script>

<style>
.clone{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #E4EBE9;
}
.tbyy{
    position: absolute;
    z-index: 4;
    width: 150vw;
    height: 1000rpx;
    margin-left: -20%;
    margin-top: -100%;
}
.navigation-wrapper {
  position: absolute;
  z-index: 4;
  width: 70vw;
  margin-top: 20%;/* 可以根据需要调整这个值来改变导航栏距离顶部的距离 */
  padding-left: 15%;
}
.navigation-bar{
    position: absolute;
    z-index: 4;
    width: 70vw;
    padding-left: 15%;
    margin-left: -6%;
    border-radius: 20rpx;
}
.active-option {
  display: inline-block;
  padding: 5px 10px;
}
.green {
  width: 64rpx;
  height: 48rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 32rpx;
  color: #3F5649;
  line-height: 38rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.gray {
  width: 52rpx;
  height: 40rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 26rpx;
  color: #808D84;
  line-height: 30rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.vertical-line {
  border-left: 1px solid gray;
  height: 100%;
  margin-left: 5px;
  display: none;
}
.vertical-line.show {
  display: block;
}
.image{
    position: absolute;
    z-index: 2;
    width: 688rpx;
    margin-left: 4%;
    height: 1021.14rpx;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
}
.fahui{
    position: absolute;
    z-index: 5;
    width: 40rpx;
    height: 40rpx;
    margin-top: 22%;
}
.header-shadow {
     position: absolute;
     top: 0;
     left: 0;
     width: 93vw;
     height: 15vh;
     margin-left: 3.5%;
     z-index: 3; /* 确保在图片之上，但在导航栏之下 */
   }
</style>